<template>
  <div class="content_box">
    <div class="top_list">
      <van-radio-group :value="radio" @change="changePlay">
        <div class="list">
          <van-radio name="1" label-position="left">
            <div class="box">
              <div class="img">
                <van-image
                  width="100%"
                  height="100%"
                  fit="cover"
                  lazy-load
                  :src="roomMsg.roomImg && roomMsg.roomImg.length?roomMsg.roomImg[0]:''"
                />
              </div>
              <div class="msg">
                <p class="name">{{msg.roomName}}</p>
                <div class="label_box">
                  <p v-for="(child,i) in roomMsg.labelVoList" :key="i">{{child.labelName}}</p>
                </div>
              </div>
            </div>
          </van-radio>
        </div>
      </van-radio-group>
    </div>



    <van-popup :show="show" @close="closeCancel" position="bottom">
      <van-datetime-picker
        title="选择提前入场时间"
        type="datetime"
        v-model="currentDate"
        :min-date="currentEndDate"
        :max-date="currentDate"
        :formatter="formatter"
        @cancel="closeCancel"
        @confirm="onConfirm"
      />
    </van-popup>


    <div class="up_time_box">
      <!-- <picker 
        mode='time'
        @change="timeChange"
        :end="newDate"
      > -->
        
      <!-- </picker> -->
      <p class="title">更改前时间段</p>
      <div class="changeTime">
        <div class="left">
          <p class="text">开始时间</p>
          <p class="day">{{oldTimeMsg.startWeek}} {{oldTimeMsg.startTimeSlot}}</p>
          <p class="time">{{oldTimeMsg.startTime}}</p>
        </div>
        <div class="center">
          <p class="totel">共{{oldTimeMsg.timeLength}}小时</p>
        </div>
        <div class="left">
          <p class="text">结束时间</p>
          <p class="day">{{oldTimeMsg.endWeek}} {{oldTimeMsg.endTimeSlot}}</p>
          <p class="time">{{oldTimeMsg.endTime}}</p>
        </div>
      </div>
      
    </div>

    <div class="time_pop">
      <p class="title1">提前入场时间</p>
      <p class="text" @click="timeShow">{{changeTime}}<van-icon name="arrow" /></p>
    </div>

    <div class="up_time_box" v-if="isXf">
      <p class="title">更改后时间段</p>
      <div class="changeTime">
        <div class="left">
          <p class="text">开始时间</p>
          <p class="time">{{newTimeMsg.startTime}}</p>
          <p class="day">{{newTimeMsg.startWeek}} {{newTimeMsg.startTimeSlot}}</p>
        </div>
        <div class="center">
          <p class="totel">共{{newTimeMsg.timeLength}}小时</p>
        </div>
        <div class="left">
          <p class="text">结束时间</p>
          <p class="time">{{newTimeMsg.endTime}}</p>
          <p class="day">{{newTimeMsg.endWeek}} {{newTimeMsg.endTimeSlot}}</p>
        </div>
      </div>
    </div>

    <div :style="{paddingBottom:isIphoneXnum+100+'px'}">
      <div class="action_box">
        <div class="tir_top">提前入场说明：</div>
        <div class="tir_one">1.距您订单开始前2小时即可进入大厅，棋牌室大厅可供您随意休息、看书、用餐，您如果想提前进入房间开始棋牌体验，您可以使用本提前入场服务；</div>
        <div class="tir_one">2.若您当日的订单开始时间前房间可用，您可以选择时间提前入场消费；</div>
        <div class="tir_one">3.如因自身原因于订单开始消费前取消：距开始时间一小时以上，收取10%平台调度费用；一小时以内，收取四小时最低消费；</div>
        <div class="tir_one">4.如因自身原因在消费中提前结束订单：扣除最低消费后退回；</div>
      </div>
    </div>

    <div class="button_box" :style="{paddingBottom:isIphoneXnum+'px'}">
      <div class="box">
        <!-- <p class="price">￥<span>{{totlePrice}}</span></p> -->
        <p class="anniu" v-if="!isXf">确认更改</p>
        <van-button 
          v-else
          @click="submit"
          :disabled="loading"
          :loading="loading" 
          loading-text="更改中..."
          type="primary"
          color="#3d98f7"
          custom-style="font-family: PingFangSC-Regular, PingFang SC;border:none;width: 690rpx;height:80rpx;line-height: 80rpx;background: #00C200;border-radius: 40rpx;text-align: center;color: #fff;font-size: 32rpx;"
        >确认更改</van-button>
      </div>
    </div>
    
  </div>
</template>

<script>
import { 
  earlyEntry,
  getMyOrderDetails,
  earlyEntryVerify
} from "@/api/index";
import { Debounce } from "@/utils"
export default {
  data() {
    return {
      timeList:[
        {time:'1个小时',label:1},
        {time:'2个小时',label:2},
        {time:'3个小时',label:3},
        {time:'4个小时',label:4},
      ],
      isIphoneXnum:0,
      radio:'1',
      msg:{},
      oldTimeMsg:{},
      newTimeMsg:{},
      changeTime:'请选择时长',
      isXf:false,
      totlePrice:'0.00',
      loading:false,
      label:0,
      roomMsg:{},
      newDate:new Date().getFullYear(),
      currentEndDate:0,
      show:false,
      
      currentDate: new Date().getTime(),
      formatter(type, value) {
        if (type === 'year') {
          return value+'年'
        } else if (type === 'month') {
          return value+'月'
        } else if (type === 'day') {
          return value+'日'
        } else if (type === 'hour') {
          return value+'时'
        } else if (type === 'minute') {
          return value+'分'
        } else if (type === 'second') {
          return value+'秒'
        }
        return value
      },
      radio_type:'1',
    };
  },
  methods: {

    // 选择支付方式
    changePlay(e){
      console.log(e)
      this.radio_type = e.mp.detail
    },

    timeShow(){
      this.show = true
    },

    // 时间戳转换
    timestampToTime(timestamp) {
      var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-';
      var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1):date.getMonth()+1) + '-';
      var D = (date.getDate()< 10 ? '0'+date.getDate():date.getDate())+ ' ';
      var h = (date.getHours() < 10 ? '0'+date.getHours():date.getHours())+ ':';
      var m = (date.getMinutes() < 10 ? '0'+date.getMinutes():date.getMinutes()) + ':';
      var s = date.getSeconds() < 10 ? '0'+date.getSeconds():date.getSeconds();
      return Y+M+D+h+m+s;
    },

    // 选择时间
    onConfirm(e){
      console.log(e)
      let startTime = this.timestampToTime(e.mp.detail)
      let data = {
        orderId:this.roomMsg.id,
        startTime
      }
      earlyEntryVerify(data).then(res=>{
        if(res.statusCode == '00000'){
          this.changeTime = startTime
          this.newTimeMsg = this.getSplicTime(res.data.startTime,res.data.endTime)
          this.show = false
          this.isXf = true
        }else{
          this.show = false
          this.$toast(res.message)
        }
      })
    }, 

    // 关闭时间弹窗
    closeCancel(){
      this.show = false
    },

    // 获取订单详情
    getOrderMsg(){
      getMyOrderDetails({orderId:this.msg.orderId}).then(res=>{
        if(res.statusCode == '00000'){
          let startTime = res.data.startTime
          this.roomMsg = res.data
          startTime = startTime.replace(/-/g, '/');
          this.currentDate = new Date(startTime).getTime()
          this.currentEndDate = this.currentDate - 60000*60*24*6
        }
      })
    },

    // 提前入场提交
    submit:Debounce(function () {
      this.$showLoading('更改中...')
      this.loading = true
      let data = {
        orderId:this.msg.orderId,
        startTime:this.changeTime
      }
      setTimeout(() => {
        earlyEntry(data).then(res=>{
          if(res.statusCode == '00000'){
            if(res.data){
              wx.hideLoading()
              this.$toast('更改成功！')
              setTimeout(() => {
                wx.reLaunch({
                  url: `/pages/order_xq/main?orderId=${this.msg.orderId}&shareType=0`,
                });
              }, 1000);
            }
          }else{
            wx.hideLoading()
            this.loading = false
            this.$toast(res.message)
          }
        })
      }, 1000);
    },300),

    // 续费时长选择
    timeChange(e){
      console.log(e)
      let index = e.mp.detail.value
      this.label = this.timeList[+index].label
      this.changeTime = this.timeList[+index].time
      let tqStartTime = (new Date(this.msg.startTime).valueOf())-this.label*3600000
      let tqEndTime = (new Date(this.msg.endTime).valueOf())-this.label*3600000
      this.newTimeMsg = this.getSplicTime(tqStartTime,tqEndTime)
      console.log(this.newTimeMsg)
      this.totlePrice = ((+this.msg.price)*(+this.newTimeMsg.timeLength)).toFixed(2)
      this.isXf = true
    },

    // 洗时间-续费前后
    getSplicTime(start,end){
      let weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      let startDate = new Date(start);
      let endDate = new Date(end);
      return {
        startTime:`${startDate.getFullYear()}-${(startDate.getMonth() + 1).toString().length == 1
            ? "0" + (startDate.getMonth() + 1).toString()
            : startDate.getMonth() + 1}-${startDate.getDate().toString().length == 1
            ? "0" + startDate.getDate()
            : startDate.getDate()}`,
        endTime:`${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().length == 1
            ? "0" + (endDate.getMonth() + 1).toString()
            : endDate.getMonth() + 1}-${endDate.getDate().toString().length == 1
            ? "0" + endDate.getDate()
            : endDate.getDate()}`,
        startTimeSlot:`${startDate.getHours().toString().length == 1
            ? "0" + startDate.getHours().toString():startDate.getHours()}:${startDate.getMinutes().toString().length == 1
            ? "0" + startDate.getMinutes().toString():startDate.getMinutes()}`,

        endTimeSlot:`${endDate.getHours().toString().length == 1
            ? "0" + endDate.getHours().toString():endDate.getHours()}:${endDate.getMinutes().toString().length == 1
            ? "0" + endDate.getMinutes().toString():endDate.getMinutes()}`,
        startWeek:weeks[startDate.getDay()],
        endWeek:weeks[endDate.getDay()],
        timeLength:this.getHour(start,end)
      }
    },

    // 算选择多少小时
    getHour(s1, s2) {
      let time = s2 - s1
      let timeDate = new Date(time);
      var ms = timeDate.getTime();
      if (ms < 0) return 0;
      return ms / 1000 / 60 / 60;  //小时
    },
  },
  onShow(){
    this.isXf = false
    this.changeTime = '请选择时长'
    this.totlePrice = '0.00'
    setTimeout(() => {
      this.getOrderMsg()
    }, 300);

    console.log(this.newDate)
  },
  onLoad(options) {
    this.msg = JSON.parse(options.info)
    console.log(this.msg)
    this.oldTimeMsg = this.getSplicTime(Date.parse(this.msg.startTime),Date.parse(this.msg.endTime))
    console.log(this.oldTimeMsg)
    //判断手机机型，动态给底部添加样式
    wx.getSystemInfo({
      success: (res) => {
        console.log("手机信息res" + res.model);
        let modelmes = res.model;
        if (
          modelmes.search("iPhone 13") != -1 ||
          modelmes.search("iPhone 12") != -1 ||
          modelmes.search("iPhone 11") != -1 ||
          modelmes.search("iPhone X") != -1 ||
          modelmes.search("iPhone XR") != -1 ||
          modelmes.search("iPhone XS") != -1
        ) {
          this.isIphoneXnum = 25;
        } else {
          this.isIphoneXnum = 0;
        }
      },
    });
  },
  onUnload() {
    this.loading = false
  },
};
</script>

<style lang="scss" scoped>
.content_box{
  min-height: 100vh;
  background: #F5F5F5;
  padding-top:20rpx;
  .top_list{
    width: 94%;
    margin:0 auto;
    margin-bottom:24rpx;
    .list{
      background: #fff;
      padding:24rpx;
      margin-bottom:24rpx;
      border-radius: 16rpx;
      position: relative;
      /deep/ .van-radio__icon--checked{
        background: #00C200;
        border-color:#00C200;
      }
      /deep/ .van-radio__label{
        width: 100%;
      }
    }
    .box{
      display: flex;
      align-items: center;
      .img{
        width: 140rpx;
        height: 160rpx;
      }
      .msg{
        margin-left: 24rpx;
        .name{
          font-size: 32rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #111111;
          margin-bottom:15rpx;
        }
        .label_box{
          margin-top:12rpx;
          p{
            display: inline-block;
            padding:0 12rpx;
            height: 40rpx;
            line-height: 40rpx;
            background: #FFFFFF;
            border: 2rpx solid #00C200;
            border-radius: 10rpx;
            margin-right:16rpx;
            font-size: 22rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #00C200;
            &:last-child{
              margin-right:0;
            }
          }
        }
      }
    }
    .down_time{
      position: absolute;
      top:0;
      right:0;
      background: #FAF1EC;
      padding:4rpx 0rpx;
      width: 120rpx;
      text-align: center;
      border-bottom-left-radius: 20rpx;
      .item{
        color:#FF4357;
        font-weight: 500;
        font-size:30rpx;
      }
    }
  }
  .up_time_box{
    width: 94%;
    margin:0 auto;
    margin-bottom:24rpx;
    background: #fff;
    border-radius: 16rpx;
    .title{
      padding:0 24rpx;
      height: 104rpx;
      line-height: 104rpx;
      font-size:32rpx;
      color:#111;
      font-weight: 500;
      border-top-right-radius: 16rpx;
      border-top-left-radius: 16rpx;
      background: linear-gradient(158deg, #D6FFD6 0%, #FFFFFF 28%, #D8FFD8 100%, #88F388 100%);
    }
    .changeTime{
      border-radius: 4rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding:24rpx;
      .text{
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #999999;
      }
      .time{
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #111111;
      }
      .day{
        font-size: 30rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #00C200;
        margin:16rpx 0;
      }
      .center{
        display: flex;
        align-items: center;
        .totel{
          width: 220rpx;
          height: 64rpx;
          line-height: 64rpx;
          background: #00C200 !important;
          border-radius: 50rpx;
          font-size: 32rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
          text-align: center;
        }
      }
    }
    
    .title_box{
      margin:0 32rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom:1px solid #F2F1F4;
      .title{
        font-size: 30rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #111111;
        padding:0;
      }
      .text{
        font-size: 30rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
      }
    }
  }
  .time_pop{
      width: 88%;
      background: #fff;
      padding:0 24rpx;
      height: 104rpx;
      line-height: 104rpx;
      font-size:28rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-radius: 16rpx;
      margin:24rpx auto;
      .title1{
        font-size: 28rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        color: #111111;
        font-weight: 500;
      }
      .text{
        font-size: 28rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        color: #111111;
        font-weight: 500;
      }
    }
  .action_box{
    margin-top: 20rpx;
    padding-bottom: 10rpx;
    border-radius: 4rpx;
    background: #fff;
    width: 94%;
    margin:20rpx auto 0 auto;
    border-radius: 16rpx;
    .tir_top{
      // height: 25rpx;
      padding: 0 30rpx;
      height: 90rpx;
      line-height:90rpx ;
      border-bottom:1px solid #f4f4f4;
      margin-bottom: 10rpx;
      font-size: 32rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #111111;
    }
    .tir_one{
       padding: 0 30rpx;
      line-height: 50rpx;
      display: flex;
      align-items: center;
      font-size:26rpx !important;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #999999;
    }
  }
  .button{
    width: 288rpx;
    height: 80rpx;
    line-height: 80rpx;
    background: #00C200;
    box-shadow: 0rpx -2rpx 2rpx 0rpx rgba(0,0,0,0.02);
    border-radius: 40rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    text-align: center;
  }
  .button_box{
    width: 100%;
    height: 120rpx;
    position: fixed;
    bottom:0;
    left:0;
    background: #fff;
    // ededed
    // box-shadow: 0 10rpx 15rpx 10rpx rgb(219, 219, 219);
    border-top:1px solid #D9D9D9;
    .box{
      width: 92%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin:0 auto;
      .price{
        font-size:32rpx;
        text-align: right;
        margin-right: 20px;
        span{
          font-size: 46rpx;
          font-weight: 500;
        }
      }
      .anniu{
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        background: #b4e8b4;
        box-shadow: 0rpx -2rpx 2rpx 0rpx rgba(0,0,0,0.02);
        border-radius: 40rpx;
        font-size: 32rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        text-align: center;
      }
      .meituan{
        margin-right:30rpx;
        background: linear-gradient(to right, #FFDD48 50%, #FCCA4E 100%);
        color:#333;
      }
    }
     .text_t{
      color:#FF4D50;
      font-size:28rpx;
      margin-bottom:6rpx;
    }
  }
}
</style>